<template>
  <!-- 戴博学 2023年4月3日 20点53分 -->
  <!-- 用户信息更改 -->
    <div class="total">
      <div class="start">
         <div class="photo"><img v-if="newForm.avatarUrl" :src="newForm.avatarUrl" class="avatar"></div>
          <div style="text-align: center; font-size: x-large;">个人信息</div>
          <div class="message">
            <ul style="list-style-type: none;">
              <li style="font-weight: bolder; font-size: larger;">昵 称<i class="el-icon-user"></i>: {{ruleForm.nickName}}
                <span style="font-size: xx-small; color: gray;">（为账号打上独一无二的个人标记）</span>
              </li>
              <!-- 用户信息信息 -->
              <el-divider></el-divider>
              <li style="font-weight: bolder; font-size: larger;">用 户 名<i class="el-icon-user"></i>: {{ruleForm.userName}}
                <i class="el-icon-edit" @click="updateUserName()"></i>
                <span style="font-size: xx-small; color: gray;">（点击修改用户名）</span>
              </li>
              <!-- 邮箱 -->
              <el-divider></el-divider>
              <li style="font-weight: bolder; font-size: larger;">性 别<i class="el-icon-s-custom"></i>: {{newForm.sex}}</li>
              <!-- 邮箱 -->
              <el-divider></el-divider>
              <li style="font-weight: bolder; font-size: larger;">电 子 邮 箱<i class="el-icon-message"></i>: {{newForm.mail}}</li>
              <!-- 手机号 -->
              <el-divider></el-divider>
              <li style="font-weight: bolder; font-size: larger;">手 机 号<i class="el-icon-caret-right"></i>: {{newForm.phone}}
                <i class="el-icon-edit" @click="updatePhone()"></i>
                <span style="font-size: xx-small; color: gray;">（点击修改手机号）</span>
              </li>
              <el-divider></el-divider>
              <!-- 创建时间 -->
              <li style="font-weight: bolder; font-size: larger;">创 建 时 间<i class="el-icon-caret-right"></i>: {{newForm.createTime}}</li>
              <el-divider></el-divider>
            </ul>
          </div>
          <div class="btn">
          <!--修改用户密码-->
          <el-button type="success" @click="updatePassword()">修改密码</el-button>
          <!--修改用户信息按钮-->
          <el-button type="primary" @click="addProduct('ruleForm')">修改信息</el-button>
          <!--修改用户邮箱-->
          <el-button type="primary" @click="updateMail()">修改邮箱</el-button>
        </div>
      </div>

<!-- 校验密码 -->
<el-dialog title="校验密码" :visible.sync="ds" @close="handleClose('ruleForm')">
        <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px">
          <!-- 旧密码 -->
        <div>
         <el-form-item label="旧密码:" prop="oldPassword">
                <el-col :span="8">
                    <el-input placeholder="请输入密码" type="password" v-model="ruleForm.oldPassword"></el-input>
                </el-col>
         </el-form-item>
        </div>
        </el-form>  
        <div slot="footer" class="dialog-footer">
              <el-button @click="ds = false">取 消 修 改</el-button>
              <el-button type="primary" @click="selectPassword()">确 定 修 改</el-button>
        </div>
      </el-dialog>

      <!-- 修改用户名 -->
      <el-dialog title="修改用户名" :visible.sync="dialogFormUserNameVisible" @close="handleClose('ruleForm')">
        <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px">
          <!-- 用户名 -->
          <el-form-item label="用户名:" prop="userName">
                <el-col :span="8">
                    <el-input placeholder="新的用户名" v-model="ruleForm.userName"></el-input>
                </el-col>
          </el-form-item>
        </el-form>  
        <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormUserNameVisible = false">取 消 修 改</el-button>
              <el-button type="primary" @click="updateUserNames()">确 定 修 改</el-button>
        </div>
      </el-dialog>
      <!-- 修改手机号 -->
      <el-dialog title="修改手机号" :visible.sync="dialogFormPhoneVisible" @close="handleClose('ruleForm')">
        <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px">
                      <!-- 手机号 -->
            <el-form-item label="手机号:" prop="phone">
                <el-col :span="8">
                    <el-input placeholder="请输入11位手机号" v-model="ruleForm.phone" ></el-input>
                </el-col>
            </el-form-item>
            <!-- 手机号验证码 -->
            <el-form-item prop="phoneCode" label="输入验证码">
							<el-input  v-model="ruleForm.phoneCode" style="width:36%;float:left;"></el-input>
							<el-button  class="login_mailCode" @click="getPhoneCountdown('ruleForm')"  :disabled="phoneTotalTime <60">{{phoneContent}}</el-button>
						</el-form-item>
        </el-form>  
        <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormPhoneVisible = false">取 消 修 改</el-button>
              <el-button type="primary" @click="updatePhones()">确 定 修 改</el-button>
        </div>
      </el-dialog>
      <!-- 修改用户密码 -->
      <el-dialog title="修改用户密码" :visible.sync="dialogFormPasswordVisible" @close="handleClose('ruleForm')">
        <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px">
        
        <!-- 新密码 显示隐藏-->
        <div>
         <el-form-item label="密码:" prop="password">
                <el-col :span="8">
                    <el-input placeholder="请输入密码" type="password" v-model="ruleForm.password"></el-input>
                </el-col>
         </el-form-item>
        <!-- 确认密码 -->
         <el-form-item label="确认密码:" prop="checkPassword">
                <el-col :span="8">
                    <el-input placeholder="请输入密码" type="password" v-model="ruleForm.checkPassword"></el-input>
                </el-col>
          </el-form-item>       
        </div>
      </el-form> 
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormPasswordVisible = false">取 消 修 改</el-button>
          <el-button type="primary" @click="updatePasswords()">确 定 修 改</el-button>
      </div>        
      </el-dialog>
      <!-- 修改用户邮箱 -->
      <el-dialog title="修改邮箱" :visible.sync="dialogFormMailVisible" @close="handleClose('ruleForm')">
        <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px">
         <!-- 邮箱 -->
         <el-form-item label="邮箱:" prop="mail">
                <el-col :span="8">
                    <el-input placeholder="邮箱格式123@qq.com" v-model="ruleForm.mail"></el-input>
                </el-col>
         </el-form-item>
         <!-- 用户邮箱验证 -->
         <el-form-item prop="mailCode" label="邮箱验证：">
              <el-col :span="8">
                <el-input placeholder="输入邮箱验证码"  prefix-icon="el-icon-message" v-model="ruleForm.mailCode"  clearable></el-input>
                </el-col>
                <el-button  class="login_mailCode" @click="getCountdown('ruleForm')" :disabled="totalTime <60">{{content}}</el-button>
         </el-form-item>
      </el-form> 
      <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormMailVisible = false">取 消 修 改</el-button>
              <el-button type="primary" @click="updateMails()">确 定 修 改</el-button>
      </div>     
      </el-dialog>
      <!-- 修改用户信息 -->
      <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible" @close="handleClose('ruleForm')">
      <el-form status-icon :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px">
            <div class="photo">
            <!-- 图片上传 -->
            <el-form-item  prop="avatarUrl" label="头像:"> 
            <el-upload
            class="avatar-uploader"
            action="http://localhost:8088/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.avatarUrl" :src="ruleForm.avatarUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            </div>
            <div class="mess">
            <!-- 昵称 -->
            <el-form-item label="昵称:" prop="nickName">
                <el-col :span="8">
                    <el-input placeholder="请输入昵称" v-model="ruleForm.nickName"></el-input>
                </el-col>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="性别:" prop="gender">
              <el-radio v-model="ruleForm.gender" label="0">男</el-radio>
              <el-radio v-model="ruleForm.gender" label="1">女</el-radio>
            </el-form-item>
            <!-- 重置信息按钮 -->
            <el-form-item>
              <el-button type="info" @click="resetForm('ruleForm')">重 置 信 息</el-button>
            </el-form-item>
            <!-- 修改时间 -->
            <div class="wrapper" style="display: none;">
              {{dateFormat(date)}}
            </div>   
          </div>    
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消 修 改</el-button>
        <el-button type="primary" @click="updateUser('ruleForm')">确 定 修 改</el-button>
    </div>
    </el-dialog>
    </div>

</template>

<script>
//导入axios传递参数
import axios from 'axios';
export default {
  //vue生命周期狗子函数创建
  created(){
    //获取用户id
    this.userId = window.sessionStorage.getItem("userId")
    //通过id查询用户信息
    this.selectUser()
  },  
   data(){
    // 判断手机号验证码是否正确
		const comparePhoneCode = (rule , value , callback) => {
			if(value == ''){
				callback(new Error("验证码不能为空"))
			} else {
				this.$axios.get('/upUser/comparePhoneCode?code=' + value).then(res => {
					if(res.data.data.flag){
						callback();
					} else {
						callback(new Error('验证码不正确'))
					}
				})
			}
		}
    //检验用户名查重
    const checkUserName = (rule,value,callback) => {
      if (value == '' | value == null) {
					callback(new Error('用户名不能为空'))
				} else {
                    this.ruleForm.userName = value.replace(/[\u4E00-\u9FA5]/g, "");
                    if(this.ruleForm.userName == ''){
                        callback(new Error('账号名不允许有中文的出现'))
                    } else {
                        if( value.length > 5){
                            this.$axios.get('/upUser/checkUserName?userName=' + value).then(res => {
                                if(res.data.data != null){
                                    callback(new Error('当前名字已存在'))
                                } else {
                                    callback();
                                }
                            })
                        } else{
                            callback(new Error('账号最少输入六位'))
                        }  
                    }
				}
    }
    // 校验手机号查重
			const checkPhone = (rule, value, callback) => {
          const mobile = /^(1[3456789]\d{9})$/;
              if (value == '') {
                  callback(new Error('手机号不能为空'))
                } else {
                    if(mobile.test(value)){
                        //查询数据库中是否重复手机号
                        this.$axios.get('/upUser/checkPhone?phone=' + value).then(res => {
                            if(res.data.data != null){
                                callback(new Error('当前手机号已存在'))
                            } else {
                                callback();
                            }
                        })
                    } else {
                        callback(new Error('输入正确的手机号格式'))
                    }
              }        
			}
    // 校验邮箱号查重
			const checkmail = (rule, value, callback) => {
              const regMobile =  /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
                if(value == ''){
                    callback(new Error('邮箱不能为空'))
                } else {
                  //查询数据库中是否重复邮箱
                    if(regMobile.test(value)){
                        this.$axios.get('/upUser/checkMail?mail=' + value).then(res => {
                            if(res.data.data != null){
                                callback(new Error('当前邮箱号已存在'))
                            } else {
                                callback();
                            }
                        })
                    } else{
                        callback(new Error('请输入合法的邮箱'))
                    }
              }        
			}
    //密码校验
    var validatePass = (rule, value, callback) => {
        if (value === '' | value == null | /\s/.test(value)) {
          callback(new Error('请输入密码,密码不能为空格'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPassword');
          }
          callback();
        }
      };
      // 密码校验
      var validatePass2 = (rule, value, callback) => {
        if (value === ''| value == null | /\s/.test(value)) {
          callback(new Error('请输入密码,密码不能为空格'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      //旧密码校验
      var validatePass3 = (rule, value, callback) => {
        if (value === ''| value == null | /\s/.test(value)) {
          callback(new Error('请输入正确的密码'));
        }  else {
          callback();
        }
      };
      return{
        //校验密码的弹窗
        ds:false,
        //检验密码是否为空
        flag:false,
        //验证码
        phoneContent:'发送验证码',
        //手机号验证码倒计时
        phoneTotalTime:60,
        //修改手机号
        dialogFormPhoneVisible:false,
        //修改用户名
        dialogFormUserNameVisible:false,
        //修改邮箱的弹窗
        dialogFormMailVisible:false,
        //验证码
        content:'发送验证码',
        //验证码倒计时
        totalTime:60,
        //密码框的显示隐藏
        showOldPassword:true,
        //密码框的显示隐藏
        showPassword:false,
        //修改密码的弹窗
        dialogFormPasswordVisible:false,
        //用户登录id
        userId:'',
        // 修改信息的弹窗
        dialogFormVisible: false,
        // 获取当前时间
        date:new Date(),
        //头像文件
        imageFile:File,
        newForm:{},
        ruleForm:{
          //手机号验证
          phoneCode:'',
          //用户名
          userName:'',
          //验证码
          mailCode:'',
          //旧密码
          oldPassword:'',
          //信息展示性别
          sex:'',
          //用户id
          id : '',
          //用户名
          nickName : '',
          //密码
          password : '',
          //手机号
          phone : '',
          //电子邮箱
          mail : '',
          //头像路径
          avatarUrl: '',
          //用户修改时间,
          updateTime:'',
          //性别
          gender: '',
          //创建时间
          createTime:'',
          //检验密码
          checkPassword:'',
        },
        
        rules: { 
        //检验手机号验证码是否正确  
        phoneCode: [
					{validator: comparePhoneCode, trigger: 'blur'}
				],
        // 校验用户名是否已经存在
         userName: [
						{validator: checkUserName, trigger: 'blur'}
					],
         // 校验手机号是否已经存在
         phone: [
						{validator: checkPhone, trigger: 'blur'}
					],
          //邮箱验证
          // 校验用户邮箱
          mail: [
          { required: true, validator: checkmail, trigger: 'blur' },
          ],
          //用户名验证
          nickName: [
          { required: true, message: "用户名不能为空,请输入用户名", trigger: "blur" },
          {min: 1,max: 16,message: '长度在 1 到 16 个字符'},
          ],
          //旧密码校验
          oldPassword: [
          { validator: validatePass3, trigger: "blur" },
          ],
          //密码验证
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          //二次密码验证
          checkPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          // 校验用户邮箱验证码
          mailCode: [
						{ required: true, message: '邮箱验证码不能为空', trigger: 'blur' },
					],
      },
    }
  },
  methods:{
    //  修改手机号向我们的手机号发送验证码
		sendPhoneCode(){
			this.$axios.get('/upUser/sendPhoneCode?phone=' + this.ruleForm.phone).then(res => {
			})
		},
		// 修改手机号验证发送倒计时   
		getPhoneCountdown(rules) {
			// 校验是否输入手机号 
			this.$refs[rules].validateField('phone', (valid) => {
				if (valid === '') {
					// 发送验证码
					this.sendPhoneCode()
					// 60秒倒计时
					let clock =  window.setInterval(() => {
						this.phoneContent = this. phoneTotalTime + 's后重新发送';
						this.phoneTotalTime --;
						if(this. phoneTotalTime < 0){
							this. phoneTotalTime = 60;
							this.phoneContent = "重新发送验证码";
							window.clearInterval(clock);
						}
					}, 1000);
				}
			})
		},
    // 确认验证码是否正确
    determineMailCode(){
                this.$axios.get('/upUser/determineMailCode', {
                    params:{
                        mail: this.ruleForm.mail,
                        code: this.ruleForm.mailCode 
                    }
                }).then(res => {
                    if(res.data.data != 200){ 
                      alert("邮箱验证码不正确")
                    } 
                })
            },
    // 向我们的邮箱发送验证码
    registerByMailCode(){
                this.$axios.get('/upUser/registerByMailCode?mail=' + this.ruleForm.mail).then(res => {
                })
            },
            // 邮箱验证发送倒计时   
            getCountdown(ruleForm) {
                // 校验是否输入邮箱
                this.$refs[ruleForm].validateField('mail', (valid) => {
                    if (valid === '') {
                        // 发送验证码
                        this.registerByMailCode()
                        // 60秒倒计时
                        let clock =  window.setInterval(() => {
                            this.content = this. totalTime + 's后重新发送';
                            this.totalTime --;
                            if(this. totalTime < 0){
                                this. totalTime = 60;
                                this.content = "重新发送验证码";
                                window.clearInterval(clock);
                            }
                        }, 1000);
                    }
                })
            },
      // 重置数据，同时也取消了表单的校验 refundFormData：el-form用ref绑定的值，
      handleClose(formName) {
                this.$refs[formName].resetFields()
            },
      //修改手机号      
      updatePhones(){
        var formData = new FormData();
        formData.set("id",this.ruleForm.id)
        formData.set("phone",this.ruleForm.phone)
        this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/upUser/updatePhone',formData).
                        then(res => {
                            if(res.data.code == '200'){
                              this.$message("恭喜你，修改手机号成功！","success")
                              this.dialogFormPhoneVisible = false
                              this.selectUser()                               
                            }else{ 
                              this.$message("对不起,您的手机号修改错误","warning")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
      },      
      //修改用户名
      updateUserNames(){
        var formData = new FormData();
        formData.set("id",this.ruleForm.id)
        formData.set("userName",this.ruleForm.userName)
        this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/upUser/updateUserName',formData).
                        then(res => {
                            if(res.data.code == '200'){
                              this.$message("恭喜你，修改用户名成功！","success")
                              this.dialogFormUserNameVisible = false
                              this.selectUser()                              
                            }else{ 
                              this.$message("对不起,您的用户名修改错误","warning")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
      
      },        
      //修改密码
      updatePasswords(formName){
        var formData = new FormData();
        formData.set("id",this.ruleForm.id)
        formData.set("password",this.ruleForm.password)
       this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/upUser/updatePassword',formData).
                        then(res => {
                            if(res.data.code == '200'){
                              this.$message("恭喜你，修改密码成功！","success")
                              this.dialogFormPasswordVisible = false
                              this.ds = false
                              this.selectUser()                            
                            }else{ 
                              this.$message("对不起,您的密码修改错误","warning")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
      },
      //修改邮箱
      updateMails(formName){
        var formData = new FormData();
        formData.set("id",this.ruleForm.id)
        formData.set("mail",this.ruleForm.mail)
        this. determineMailCode()
        this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/upUser/updateMail',formData).
                        then(res => {
                            if(res.data.code == '200'){
                              this.$message("恭喜你，修改邮箱成功！","success")
                              this.dialogFormMailVisible = false
                              this.selectUser()                           
                            }else{ 
                              this.$message("对不起,您的密码修改错误","warning")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
      },
      //修改用户信息
      updateUser(formName){
        var formData = new FormData();
        formData.set("id",this.ruleForm.id)
        formData.set("nickName",this.ruleForm.nickName)
        formData.set("avatarUrl",this.ruleForm.avatarUrl)
        formData.set("updateTime",this.ruleForm.updateTime)
        formData.set("gender",this.ruleForm.gender)
        if(this.imageFile.name!="File"){
          formData.set("file",this.imageFile,this.imageFile.name)
          }
          this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$axios.post('/upUser/updateUser',formData).
                        then(res => {
                            if(res.data.code == '200'){
                                this.$message("恭喜你，修改数据成功！","success")
                                this.dialogFormVisible = false
                                this.imageUrl=""
                                this.imageFile=File
                                this.$router.go(0)
                                this.selectUser()                              
                            }else{ 
                                this.$message("对不起，修改数据失败！","warning")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
      },
      //修改手机号的弹窗是否显示
      updatePhone(){
        this.dialogFormPhoneVisible = true
      },
      //修改用户密码的弹窗是否显示
      updatePassword(){
        if(!this.flag){
          this.ds = false
        this.dialogFormPasswordVisible = true}else{
          this.ds = true
          this.dialogFormPasswordVisible = false
        }
      },
      //修改用户邮箱的弹窗是否显示
      updateMail(){
        this.dialogFormMailVisible = true
      },
      //修改信息的弹窗是否显示
      addProduct(){
                this.dialogFormVisible = true
                this.imageUrl=""
      },
      //修改用户名的弹窗是否显示
      updateUserName(){
                this.dialogFormUserNameVisible = true
      },
      //检验旧密码是否正确
      selectPassword(){
        this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              this.$axios.get('/upUser/selectPassword/',{
                params: {
                  id: this.userId,
                  password : this.ruleForm.oldPassword
                }
        }).then(res => {
            if(res.data.code == '200'){
            this.$message("密码验证正确,请输入新密码","success")
            this.flag=false
            this.newFlag=true
            this.dialogFormPasswordVisible = true
          }else{
            this.$message("密码输入错误,请重新输入密码","warning")
          }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                        })
                    } else {
                        return false;
                    }
                });
      },
      //通过id查询用户信息
      selectUser(){
        this.$axios.get('/upUser/getUserById?id='+ this.userId)
        .then((res) => {
          this.ruleForm.userName=res.data.data.userName
          this.newForm.userName=res.data.data.userName
          this.ruleForm.id=res.data.data.id
          this.newForm.id=res.data.data.id
          this.ruleForm.nickName=res.data.data.nickName
          this.newForm.nickName=res.data.data.nickName
          this.ruleForm.phone=res.data.data.phone
          this.newForm.phone=res.data.data.phone
          this.ruleForm.mail=res.data.data.mail
          this.newForm.mail=res.data.data.mail
          this.ruleForm.avatarUrl=res.data.data.avatarUrl
          this.newForm.avatarUrl=res.data.data.avatarUrl
          this.ruleForm.createTime=res.data.data.createTime
          this.newForm.createTime=res.data.data.createTime
          if(res.data.data.password == null | res.data.data.password === ''){
            this.flag=false
          }else{
            this.flag=true
          }
          if(res.data.data.gender === 0){
            this.ruleForm.gender='0'
            this.newForm.sex='男'
          }else if(res.data.data.gender === 1){
            this.ruleForm.gender='1'
            this.newForm.sex='女'
          }else{
            this.newForm.sex='未知'
          }
        })
      },
          // 图片上传之后的方法
          handleAvatarSuccess(res, file) {
              this.ruleForm.avatarUrl = URL.createObjectURL(file.raw);
          },
          // 图片上传之前的校验方法
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/png' || 'image/jpg';
              const isLt2M = file.size / 1024 / 1024 < 2;
              
              if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              this.imageFile = file
              this.ruleForm.avatarUrl = URL.createObjectURL(file);
              return false;
          },
          //修改时间
          dateFormat(time) {
          var date=new Date(time);
          var year=date.getFullYear();
          var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
          var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
          var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
          var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
          var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
          // 拼接
          return this.ruleForm.updateTime=year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      
    },
    mounted() {
      let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
          this.timer = setInterval(() => {
           _this.date = new Date(); // 修改数据date
           }, 1000)
       },
       // 在Vue实例销毁前，清除我们的定时器
      beforeDestroy() {
       if (this.timer) {
        clearInterval(this.timer); 
      }
      }
}  
</script>

<style>
   .total {
    background: #f5f5f5;
    margin-left: 170px;
   }
   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 125px;
    margin-left: 20px;
    display: block;
  }
  .font{
    width: 300px;
    height: 30px;
    margin-left: 142px;
    margin-top: -126px;
  }
  .wrapper{
    margin-left: 212px;
    margin-top: -39px;
  }
  
  .start{
    width: 650px;
    height: 500px;
 
  }
  .message{
    width: 650px;
    height:300px;

   
  }

  .btn{
    margin-left: 216px;
    margin-top: 160px;
  }
</style>